<template>
	<view>
		<Header  title="选择头像" />
		<view class="portrait">
			<view class="avatar" v-for="(avatar, index) in avatarList" :key="index"
				
				@click="avatarClick(avatar, index)"
			>
				<view class="img" :class="{ hover: index == avaterIndex}">
					<image :src="'/static/images/picture/' + avatar" mode=""></image>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'
	export default {
		components: {
			Header
		},
		data() {
			return {
				avatarList: [
					'boy_1.png', 'boy_2.png', 'boy_3.png', 'boy_4.png', 'boy_5.png', 'boy_6.png',
					 'boy_7.png', 'boy_8.png', 'boy_9.png', 'girl_1.png', 'girl_2.png', 'girl_3.png', 
					 'girl_4.png', 'girl_5.png', 'girl_6.png', 'girl_7.png', 'girl_8.png', 'girl_9.png'
				],
				avaterIndex: null,
			};
		},
		methods: {
			avatarClick(avatar, index) {
				this.avaterIndex = index
				getApp().globalData.avatar = avatar
			}
		}
	}
</script>

<style lang="scss">
	.portrait {
		margin-top: 50rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		width: 100%;
		
		.avatar {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 30%;
			height: 180rpx;
			
			.img {
				width: 165rpx;
				height: 165rpx;
				padding: 3rpx;
				border-radius: 100%;
				box-sizing: border-box;
				transition: all 0.5s ease 0s;
				image {
					width: 100%;
					height: 100%;
					border-radius: 100%;
				}
			}
			
			
			
		}
	}
	.hover {
		border: 3px solid #32CCBC;
	}
</style>
